<template>
  <div class="flex w-full absolute h-full left-0 top-0 md:flex-row">
    <section class="left w-[48%] h-full">
      <el-form class="w-[80%] h-[80%] m-auto" ref="formRef" :model="formData" :rules="formRules" label-width="100px"
        v-loading="formLoading">
        <el-form-item label="项目名称:" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="项目类型:" prop="specs">
          <div class="wrap flex w-[400px] flex-wrap gap-4">
            <categoryCom v-for="(cate, index) in categorys" :key="index">
              <template #top>
                <img class="w-[120px] h-[60px]" :src="cate.pic" alt="" />
              </template>
              <template #bottom>
                <el-radio v-model="formData.type" :label="cate.label" :value="cate.value"
                  @change="(val) => toValue0(val)" />
              </template>
            </categoryCom>
          </div>
        </el-form-item>
        <el-form-item label="项目权限:" prop="auth">
          <el-radio-group v-model="formData.isPrivate">
            <el-radio v-for="(item, index) in auth" :value="item.value" :key="index" :label="item.label" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目描述:" prop="type">
          <el-input autosize type="textarea" v-model="formData.description" placeholder="请输入产品型号" />
        </el-form-item>
        <el-form-item label="" prop="type">
          <el-button type="primary" size="default" @click="createPrt">确 定</el-button>
        </el-form-item>
      </el-form>
    </section>
    <section class="right flex-1 h-full">
      <ElCard class="w-[98%] h-[90%] cds mt-4">
        <el-carousel :initial-index="currentIndex" ref="carouselRef" :autoplay="false" trigger="click"
          class="w-full h-[80%] m-auto">
          <el-carousel-item class="w-full h-full !flex flex-col" v-for="(item, index) in categorys" :key="index">
            <section class="Img up w-full h-[60%]">
              <img :src="item.pic" class="w-full h-full" />
            </section>
            <section class="desc down flex-1">
              <section class="desc-title">{{ item.label }}</section>
              <section class="desc-default">
                <ul>
                  <li v-for="(i, idx) in item.desc.content" :key="idx">{{ i }}</li>
                </ul>
              </section>
              <section class="desc-footer">{{ item.desc.footer }}</section>
            </section>
          </el-carousel-item>
        </el-carousel>
      </ElCard>
    </section>
  </div>
</template>

<script lang="ts" setup>
import categoryCom from '@/views/a-gallery/categoryCom.vue'
import { cates } from '@/utils/a-common'
import { createProject } from '@/api/a-project/index';

const router = useRouter()
const currentIndex = ref(0)
const carouselRef = ref()
const categorys = ref(cates)
const formLoading = ref(false)
const formData = reactive({
  name: '',
  type: 1,
  isPrivate: 1,
  description: '',
})
const formRules = reactive({
  name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '产品型号不能为空', trigger: 'blur' }],
})
const auth = [
  {
    value: 1,
    label: '私有'
  },
  {
    value: 2,
    label: '公开'
  }
]

const createPrt = async () => {
  const res = await createProject(formData)
  if (res) {
    router.push('/project/index')
  }
}

const toValue0 = (val: string) => {
  carouselRef.value.setActiveItem(val - 1)
}

</script>

<style scoped lang="scss">
:deep(.el-textarea__inner) {
  height: 56px !important;
}

:deep(.el-form-item) {
  margin-top: 44px;
}

:deep(.el-carousel__container) {
  height: 100% !important;
}

.cds {
  box-shadow: 1px 3px 5px 2px rgba(154, 154, 154, 0.4) !important;

  :deep(.el-card__body) {
    width: 100%;
    height: 100%;
    //左右 下边阴影加深
  }

  .desc {
    .desc-title {
      padding: 24px 0 0 24px;
      color: rgba(16, 114, 182, 1);
      font-size: 48px;
      text-align: left;
      font-family: PingFangSC-bold;
    }

    .desc-default {
      ul {
        padding: 20px 58px;

        li {
          &::marker {
            font-size: 12px;
          }

          color: rgba(16, 114, 182, 1);
          font-size: 16px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
      }
    }

    .desc-footer {
      &::before {
        content: '*';
        padding: 0 4px;
      }

      color: rgba(16, 114, 182, 1);
      font-size: 16px;
      padding: 4px 40px;
    }
  }
}
</style>
